<template>
    <div class="check">
         <div class="header">
            <div class="titel">
                <van-icon name="cross" @click="$router.back()"/>
                 <h2>账单</h2>
            </div>   
               <p><span>月账单</span> <span>年账单</span></p>
                 <div class="time">
                      <div>2022年10月 ^</div>
                       <div class="income">
                          <span>支出</span>
                          <span>收入</span>
                          <span>其他</span>
                       </div>
                 </div>
                  <h4>共支出93笔,合计</h4>
                  <h1>￥1783</h1>
         </div>


         <!-- 账单表 -->
         <div class="bar-chart" ref="barChart"></div>
    </div>
</template>

<script>
 import * as echarts from 'echarts' // 引入echarts全部图标
 export default {
    data() {
        return {
            chart: null,
           
        }
    },
    mounted() {
        // 页面渲染完毕,我们将echarts实例化,并渲染一个饼状图出来
        this.createBarChart()
    },
    methods: {
        createBarChart() {
            // 初始化一个图标元素, 参数一 DOM 元素 参数二 主题 参数图标样式选项,如宽高
            // echart 主题支持'dark'模式,也支持自定制需要在官网的主题编辑器里自己设置并导出,也有一些现成三方人员定义出来的主题可以自行下载使用
            this.chart = echarts.init(this.$refs.barChart)
                // width: 200,
                // height: 100
           
            // 绘制图标
            const option = {
               
                color: [ // 自己指定图标数据的颜色
                    'rgb(60,179,113)',
                    'rgb(60,179,113)',
                    '#fff',
                ],
                legend: {
                    data: ['支出', '收入'],
                    selectedMode:'single'

                },
                xAxis: {
                    type: "category", //类型
                    data: ['5月', '6月', '7月', '8月', '9月', '10月'],
                    axisTick: {
                       show: false,  //隐藏刻度线
                      },
                },
                yAxis: {
                    show:false,
                    splitLine: {
                     show: false
                     },
                },
                series: [
                    {
                        name: '支出',
                        type: 'bar', // 柱状图
                        data: [2385, 29000, 2036, 3725, 3122, 1783],
                        barWidth: '40%',
                        itemStyle:{
                            normal: {
                                label:{
                                 formatter:data => {
                                    if(data.data > 10000) {
                                        return `￥${data.data / 10000}万`
                                 }
                                 return `￥${data.data}`
                                },
                                show:true,
                                position:"top",
                                textStyle: {
                                    fontSize: '12'
                                },

                            },

                            }
                        },
                    
                      },
                      {
                        name: '收入',
                        type: 'bar', // 柱状图
                        data: [1000, 2800, 2300, 1589, 1170, 1142],
                        barWidth: '20%',
                        itemStyle:{
                            normal: {
                                label:{
                                 formatter:data => {
                                    if(data.data > 10000) {
                                        return `￥${data.data / 10000}万`
                                 }
                                 return `￥${data.data}`
                                },
                                show:true,
                                position:"top",
                                textStyle: {
                                    fontSize: '12'
                                },

                            },

                            }
                        },
                    }
                ]

            }
            // 通过指定的配置选项将数据渲染在图标元素上
            this.chart.setOption(option)
        },
    },
    beforeDestroy() {
        // echarts 是一个dom操作的三方库,当vue组件被销毁时,echarts图表并没有被销毁
        // 为了避免内存泄漏,应该调用图标实例的dispose方法
        this.chart.dispose() // 释放图表实例
    }
}



</script>



<style lang="scss" scoped>
  .check {
      position: relative;
      width: 100vw;
      height: 200vh;
      background: #fff;
      color:#fff;
      z-index: 9999;
      
    .header {
      width: 100vw;
      height: 250px;
      background: rgb(60,179,113);
       padding: 10px;
       .titel {
          display: flex;
          height: 30px;
          text-align: center;
          line-height: 30px;
          align-items: center;
          h2 {
            flex: 1 ;
          }
        
       }
       p {
            margin-top: 20px;
            height: 30px;
            text-align: center;
            line-height: 30px;
          

            span {
                display: inline-block;
                 width: 50px;
                 
                 
                 &:nth-child(1) {
                    
                    border-bottom: 2px solid #fff;
                    margin-right: 30px;
                 }
            }
          }
        .time {
            display: flex;
            height: 30px;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
            
            .income {
              display: flex;
              flex: 0 0 150px;
              width: 150px;
              justify-content: space-between;
              font-size: 14px;
                span {
                  width: 40px;
                  text-align: center;
                  padding: 2px;
                }
               & span:nth-child(1) {
                    border-radius: 10px;
                    border: 1px solid #fff;
               }
            }

        }
        h4 {
            margin-top: 10px;
            font-size: 12px;
            
        }
        h1 {
            font-size: 20px;
            font-weight: 600;
            margin-top: 20px; 
        }
        
    }
    .bar-chart {
        margin-top: 10px;
        width: 100vw;
        height: 200px;
        border: 1px solid red;
    }

  }
</style>